<template>
	<!--  列表页公用的表格/页码 -->
	<div class="option">
		<el-row :gutter="20">
			<el-col :span="24">
				<el-card class="box-card">
					<div class="boxcard-head"></div>
					<div class="boxcard-body">
						<el-table :data="list" style="width: 100%" :header-cell-style="{ 'background-color': '#EEEEEE' }">
							<el-table-column type="index" label="排序" width="60px"></el-table-column>
							<el-table-column prop="name" label="选项分类"  show-overflow-tooltip></el-table-column>
							<el-table-column prop="remark" label="选项备注" show-overflow-tooltip></el-table-column>
							<el-table-column prop="updateTime" label="更新时间" show-overflow-tooltip></el-table-column>
							<el-table-column label="操作">
								<template slot-scope="scope">
									<el-button @click="dialogField(scope.row)" type="text" size="small">编辑</el-button>
								</template>
							</el-table-column>
						</el-table>
						<!-- 分页 -->
						<div class="pagination">
							<el-pagination
								background
								@size-change="handleSizeChange"
								@current-change="pageChange"
								:total="total"
								:current-page.sync="pageNum"
								:page-sizes="[10, 20]"
								:page-size="10"
								layout="total, sizes, prev, pager, next"
							></el-pagination>
						</div>
						<!--  end 列表页公用的表格/页码 -->
					</div>
				</el-card>
			</el-col>
		</el-row>
		<!-- 选项配置弹窗 -->
		<div>
			<el-dialog :title="editName" :visible.sync="dialogFieldBox" :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false">
				<el-table :data="FieldData.items" style="width: 100%">
					<el-table-column property="sort" label="排序" width="100px">
						<template slot-scope="scope">
							<el-input v-model="scope.row.sort" placeholder="数字" maxlength="3"></el-input>
						</template>
					</el-table-column>
					<el-table-column property="cname" label="内容列表" min-width="50%">
						<template slot-scope="scope">
							<el-input v-model="scope.row.cname" placeholder="输入选项内容" maxlength="100"></el-input>
						</template>
					</el-table-column>
					<el-table-column property="isLocked" label="是否锁定" width="80px">
						<template slot-scope="scope">
							<el-checkbox v-model="scope.row.isLocked"></el-checkbox>
						</template>
					</el-table-column>
					<el-table-column property="delete" label="操作" width="70px">
						<template slot-scope="scope">
							<el-button @click="itemDeleteClick(scope.$index)" type="text" size="small">删除</el-button>
						</template>
					</el-table-column>
				</el-table>
				<div><el-button type="text" icon="el-icon-circle-plus-outline" @click="itemAddAnsClick">添加选项</el-button></div>
				<div slot="footer" class="dialog-footer">
					<el-button @click="itemCancelClick">取 消</el-button>
					<el-button type="primary" @click="itemConfirmClick">确 定</el-button>
				</div>
			</el-dialog>
		</div>
	</div>
</template>

<script>
import { get, postJson } from '@/utils/request.js';

export default {
	data() {
		return {
			// 分页参数
			pageNum: 1, // 当前页数
			pageSize: 10, // 页大小
			total: 0, // 数据总条数
			list: [], // 数据列表

			// 弹窗相关属性
			editName: '编辑',
			dialogFieldBox: false,
			// 选项数据
			FieldData: {
				categoryId: '',
				items: []
			}
		};
	},
	created() {
		this.getList(this.pageNum, this.pageSize);
	},
	computed: {},
	methods: {
		// 分页相关方法
		// 页大小改变时
		handleSizeChange(val) {
			this.pageSize = val;
		},
		// 页码改变时
		pageChange(e) {
			// 获取某页数据
			this.pageNum = e;
			this.getList();
		},
		// 获取列表数据
		getList(num, size) {
			get('/selectOption/pageCategory', {
				pageNum: this.pageNum,
				pageSize: this.pageSize
			}).then(res => {
				this.list = res.data.data.list;
				// 自定义下标
				this.list.forEach((e, idx) => {
					e.idx = (idx + 1) * this.pageNum;
				});

				this.total = Number.parseInt(res.data.data.total);
				this.pageNum = Number.parseInt(res.data.data.pageNum);
			});
		},
		// 编辑按钮打开编辑字段弹窗
		dialogField(e) {
			this.editName = '编辑—' + e.name;
			this.dialogFieldBox = true;
			get('/selectOption/listSelectOption', { id: e.id }).then(res => {
				this.FieldData.categoryId = e.id;
				this.FieldData.items = res.data.data;
			});
		},
		// 选项编辑框删除当前行
		itemDeleteClick(i) {
			if (this.FieldData.items[i].id) {
				this.$message('已使用的字段不可删除');
			} else {
				this.$confirm('确认删除？').then(() => {
					this.FieldData.items.splice(i, 1);
				});
			}
		},
		// 首次确认保存
		itemConfirmClick() {
			// 排序临时数组，用于判断是否输入了重复排序
			let numberArr = [];
			// 是否提交
			let on = true;
			this.FieldData.items.forEach(e => {
				if (e.sort === '' || e.cname === '') {
					this.$message.warning('字段不能留空');
					return (on = false);
				} else {
					numberArr.push(parseInt(e.sort));
				}
			});
			if (on) {
				// 利用set去重
				let iden = new Set(numberArr);
				if (iden.size === this.FieldData.items.length) {
					postJson('/selectOption/updateSelectOption', this.FieldData).then(res => {
						this.$message.closeAll();
						this.$message.success('保存成功');
						this.itemCancelClick();
						this.getList(this.page, this.pageSize);
					});
				} else {
					this.$message.closeAll();
					this.$message.info('请勿输入重复的排序！');
				}
			}
		},

		itemCancelClick() {
			// 答案弹窗取消按钮
			this.dialogFieldBox = false;
		},

		itemAddAnsClick() {
			// 新增答案
			let newData = {
				sort: '',
				cname: '',
				isLocked: false // 是否锁定
			};
			this.FieldData.items.push(newData);
		}
	}
};
</script>
<style scoped>
.downAndUpload {
	display: flex;
	align-items: flex-start;
}
.theA {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 12px;
	color: #333;
	padding: 4px 0;
}
.theA:hover {
	background-color: #e2f5f5;
	color: #24bcb8;
}
.el-tag + .el-tag {
	margin-left: 10px;
}
</style>
